<template>
<div class="player-2048_main" id="player-2048_main">
  <div class="player-2048_main_top">
    <div class="player-2048_main_top_gamebox">
      <div class="game2048_block" id="game2048_block_11"></div><div class="game2048_block" id="game2048_block_12"></div><div class="game2048_block" id="game2048_block_13"></div> <div class="game2048_block" id="game2048_block_14"></div><div class="game2048_block" id="game2048_block_21"></div><div class="game2048_block" id="game2048_block_22"></div><div class="game2048_block" id="game2048_block_23"></div><div class="game2048_block" id="game2048_block_24"></div><div class="game2048_block" id="game2048_block_31"></div><div class="game2048_block" id="game2048_block_32"></div><div class="game2048_block" id="game2048_block_33"></div><div class="game2048_block" id="game2048_block_34"></div><div class="game2048_block" id="game2048_block_41"></div><div class="game2048_block" id="game2048_block_42"></div><div class="game2048_block" id="game2048_block_43"></div><div class="game2048_block" id="game2048_block_44"></div>
    </div>
    <div class="player-2048_main_top_gamebox_control">
      <div class="player-2048_main_top_gamebox_control_button up" @click="move_block_up_me"></div>
      <div class="player-2048_main_top_gamebox_control_button down" @click="move_block_down_me"></div>
      <div class="player-2048_main_top_gamebox_control_button left" @click="move_block_left_me"></div>
      <div class="player-2048_main_top_gamebox_control_button right" @click="move_block_right_me"></div>
    </div>
  </div>
  <div class="player-2048_main_bottom">
    <div class="player-2048_main_bottom_controls_button" style="top: 20px;left: 30px" @click="new_game_1()">新游戏</div>
    <div class="player-2048_main_bottom_controls_button" style="top: 20px;left: 190px" onclick="window.open('play2048inside.html','_self');">刷新</div>
    <div class="player-2048_main_bottom_controls_button" style="top: 20px;left: 350px;visibility: hidden">读档</div>
    <div id="score" class="player-2048_main_bottom_controls_button top_score" style="top: 20px;left: 350px">历史最高得分：0</div>
  </div>
</div>
</template>

<script>

import jsCookie from "js-cookie";

export default {
  name: "player2048",

  methods:{

    move_block_up_me: function(){
      move_block_up();
      is_full();
    },

    move_block_left_me: function(){
      move_block_left();
      is_full();
    },

    move_block_right_me: function(){
      move_block_right();
      is_full();
    },

    move_block_down_me: function(){
      move_block_down();
      is_full();
    },

    refresh_game_surface_me:function (){
      refresh_game_surface();
    },
    new_game_1:function (){
      new_game();
    },

    refresh_surface_2:function (){
      window.open('play2048.html','_self');
      for(var i=1;i<=4;i++){
        for(var i1=1;i1<=4;i1++){
          if(document.getElementById('game2048_block_' + i + i1).innerText=='0'){
            document.getElementById('game2048_block_' + i + i1).style.color="rgb(205,193,180)";
            document.getElementById('game2048_block_' + i + i1).style.backgroundColor="rgb(205,193,180)";
          }else{
            document.getElementById('game2048_block_' + i + i1).style.color="rgb(119,110,101)";
            document.getElementById('game2048_block_' + i + i1).style.backgroundColor="rgb(238,228,218)";
          }
        }
      }
    }
  },

  mounted() {
    
    recovery_game_from_local();
  }
}
var total_score=0;

function get_random_number(){
  return parseInt(Math.random()*100%4+1) ;
}

function set_new_2(){
  while(1){
    var rx=get_random_number();
    var ry=get_random_number();
    if(localStorage.getItem('n'+ry+rx)=='0'){
      break;
    }
  }
  localStorage.setItem('n'+ry+rx,2);
}

function is_fail(){
  if(localStorage.getItem('n11')==localStorage.getItem('n12')){return 0;};
  if(localStorage.getItem('n12')==localStorage.getItem('n13')){return 0;};
  if(localStorage.getItem('n13')==localStorage.getItem('n14')){return 0;};

  if(localStorage.getItem('n21')==localStorage.getItem('n22')){return 0;};
  if(localStorage.getItem('n22')==localStorage.getItem('n23')){return 0;};
  if(localStorage.getItem('n23')==localStorage.getItem('n24')){return 0;};

  if(localStorage.getItem('n31')==localStorage.getItem('n32')){return 0;};
  if(localStorage.getItem('n32')==localStorage.getItem('n33')){return 0;};
  if(localStorage.getItem('n33')==localStorage.getItem('n34')){return 0;};

  if(localStorage.getItem('n41')==localStorage.getItem('n42')){return 0;};
  if(localStorage.getItem('n42')==localStorage.getItem('n43')){return 0;};
  if(localStorage.getItem('n43')==localStorage.getItem('n44')){return 0;};

  if(localStorage.getItem('n11')==localStorage.getItem('n21')){return 0;};
  if(localStorage.getItem('n21')==localStorage.getItem('n31')){return 0;};
  if(localStorage.getItem('n31')==localStorage.getItem('n41')){return 0;};

  if(localStorage.getItem('n12')==localStorage.getItem('n22')){return 0;};
  if(localStorage.getItem('n22')==localStorage.getItem('n32')){return 0;};
  if(localStorage.getItem('n32')==localStorage.getItem('n42')){return 0;};

  if(localStorage.getItem('n13')==localStorage.getItem('n23')){return 0;};
  if(localStorage.getItem('n23')==localStorage.getItem('n33')){return 0;};
  if(localStorage.getItem('n33')==localStorage.getItem('n43')){return 0;};

  if(localStorage.getItem('n14')==localStorage.getItem('n24')){return 0;};
  if(localStorage.getItem('n24')==localStorage.getItem('n34')){return 0;};
  if(localStorage.getItem('n34')==localStorage.getItem('n44')){return 0;};

  alert('你失败了。');
  new_game();
  return 1;
}

function is_full(){
  var flag=1;
  for(var i=1;i<=4;i++){
    for(var i1=1;i1<=4;i1++){
      if(localStorage.getItem('n'+i+i1)=='0'){
        flag=0;
      }
    }
  }
  if(flag){
    is_fail();
  }
  return flag;
}

function move_block_left(){
  //使紧凑
  for(var i=1;i<=4;i++){
    if(localStorage.getItem('n'+i+'3')==0){
      localStorage.setItem('n'+i+'3',localStorage.getItem('n'+i+'4'));
      localStorage.setItem('n'+i+'4',0);
    }
    if(localStorage.getItem('n'+i+'2')==0){
      localStorage.setItem('n'+i+'2',localStorage.getItem('n'+i+'3'));
      localStorage.setItem('n'+i+'3',localStorage.getItem('n'+i+'4'));
      localStorage.setItem('n'+i+'4',0);
    }
    if(localStorage.getItem('n'+i+'1')==0){
      localStorage.setItem('n'+i+'1',localStorage.getItem('n'+i+'2'));
      localStorage.setItem('n'+i+'2',localStorage.getItem('n'+i+'3'));
      localStorage.setItem('n'+i+'3',localStorage.getItem('n'+i+'4'));
      localStorage.setItem('n'+i+'4',0);
    }
  }
  //相加
  for(var i=1;i<=4;i++){
    if(localStorage.getItem('n'+i+'1')==localStorage.getItem('n'+i+'2')){
      localStorage.setItem('n'+i+'1',parseInt(localStorage.getItem('n'+i+'1'))*2);
      current_score+=parseInt(localStorage.getItem('n'+i+'1'));
      localStorage.setItem('n'+i+'2',localStorage.getItem('n'+i+'3'));
      localStorage.setItem('n'+i+'3',localStorage.getItem('n'+i+'4'));
      localStorage.setItem('n'+i+'4',0);
      continue;
    }
    if(localStorage.getItem('n'+i+'2')==localStorage.getItem('n'+i+'3')){
      localStorage.setItem('n'+i+'2',parseInt(localStorage.getItem('n'+i+'2'))*2);
      current_score+=parseInt(localStorage.getItem('n'+i+'2'));
      localStorage.setItem('n'+i+'3',localStorage.getItem('n'+i+'4'));
      localStorage.setItem('n'+i+'4',0);
      continue;
    }
    if(localStorage.getItem('n'+i+'3')==localStorage.getItem('n'+i+'4')){
      localStorage.setItem('n'+i+'3',parseInt(localStorage.getItem('n'+i+'3'))*2);
      current_score+=parseInt(localStorage.getItem('n'+i+'3'));
      localStorage.setItem('n'+i+'4',0);
      continue;
    }
  }
  localStorage.setItem('current_score',current_score);
  if(is_full()==0){
    set_new_2();
  }

  window.open('play2048inside.html','_self');
}

function move_block_right(){
  //使紧凑
  for(var i=4;i>=1;i--){
    if(localStorage.getItem('n'+i+'2')==0){
      localStorage.setItem('n'+i+'2',localStorage.getItem('n'+i+'1'));
      localStorage.setItem('n'+i+'1',0);
    }
    if(localStorage.getItem('n'+i+'3')==0){
      localStorage.setItem('n'+i+'3',localStorage.getItem('n'+i+'2'));
      localStorage.setItem('n'+i+'2',localStorage.getItem('n'+i+'1'));
      localStorage.setItem('n'+i+'1',0);
    }
    if(localStorage.getItem('n'+i+'4')==0){
      localStorage.setItem('n'+i+'4',localStorage.getItem('n'+i+'3'));
      localStorage.setItem('n'+i+'3',localStorage.getItem('n'+i+'2'));
      localStorage.setItem('n'+i+'2',localStorage.getItem('n'+i+'1'));
      localStorage.setItem('n'+i+'1',0);
    }
  }
  //相加
  for(var i=4;i>=1;i--){
    if(localStorage.getItem('n'+i+'4')==localStorage.getItem('n'+i+'3')){
      localStorage.setItem('n'+i+'4',parseInt(localStorage.getItem('n'+i+'4'))*2);
      current_score+=parseInt(localStorage.getItem('n'+i+'4'));
      localStorage.setItem('n'+i+'3',localStorage.getItem('n'+i+'2'));
      localStorage.setItem('n'+i+'2',localStorage.getItem('n'+i+'1'));
      localStorage.setItem('n'+i+'1',0);
      continue;
    }
    if(localStorage.getItem('n'+i+'3')==localStorage.getItem('n'+i+'2')){
      localStorage.setItem('n'+i+'3',parseInt(localStorage.getItem('n'+i+'3'))*2);
      current_score+=parseInt(localStorage.getItem('n'+i+'3'));
      localStorage.setItem('n'+i+'2',localStorage.getItem('n'+i+'1'));
      localStorage.setItem('n'+i+'1',0);
      continue;
    }
    if(localStorage.getItem('n'+i+'2')==localStorage.getItem('n'+i+'1')){
      localStorage.setItem('n'+i+'2',parseInt(localStorage.getItem('n'+i+'2'))*2);
      current_score+=parseInt(localStorage.getItem('n'+i+'2'));
      localStorage.setItem('n'+i+'1',0);
      continue;
    }
  }
  localStorage.setItem('current_score',current_score);
  if(is_full()==0){
    set_new_2();
  }

  window.open('play2048inside.html','_self');
}

function move_block_down(){
  //使紧凑
  for(var i=4;i>=1;i--){
    if(localStorage.getItem('n2'+i)==0){
      localStorage.setItem('n2'+i,localStorage.getItem('n1'+i));
      localStorage.setItem('n1'+i,0);
    }
    if(localStorage.getItem('n3'+i)==0){
      localStorage.setItem('n3'+i,localStorage.getItem('n2'+i));
      localStorage.setItem('n2'+i,localStorage.getItem('n1'+i));
      localStorage.setItem('n1'+i,0);
    }
    if(localStorage.getItem('n4'+i)==0){
      localStorage.setItem('n4'+i,localStorage.getItem('n3'+i));
      localStorage.setItem('n3'+i,localStorage.getItem('n2'+i));
      localStorage.setItem('n2'+i,localStorage.getItem('n1'+i));
      localStorage.setItem('n1'+i,0);
    }
  }
  //相加
  for(var i=4;i>=1;i--){
    if(localStorage.getItem('n4'+i)==localStorage.getItem('n3'+i)){
      localStorage.setItem('n4'+i,parseInt(localStorage.getItem('n4'+i))*2);
      current_score+=parseInt(localStorage.getItem('n4'+i));
      localStorage.setItem('n3'+i,localStorage.getItem('n2'+i));
      localStorage.setItem('n2'+i,localStorage.getItem('n1'+i));
      localStorage.setItem('n1'+i,0);
      continue;
    }
    if(localStorage.getItem('n3'+i)==localStorage.getItem('n2'+i)){
      localStorage.setItem('n3'+i,parseInt(localStorage.getItem('n3'+i))*2);
      current_score+=parseInt(localStorage.getItem('n3'+i));
      localStorage.setItem('n2'+i,localStorage.getItem('n1'+i));
      localStorage.setItem('n1'+i,0);
      continue;
    }
    if(localStorage.getItem('n2'+i)==localStorage.getItem('n1'+i)){
      localStorage.setItem('n2'+i,parseInt(localStorage.getItem('n2'+i))*2);
      current_score+=parseInt(localStorage.getItem('n2'+i));
      localStorage.setItem('n1'+i,0);
      continue;
    }
  }
  localStorage.setItem('current_score',current_score);
  if(is_full()==0){
    set_new_2();
  }

  window.open('play2048inside.html','_self');
}

function move_block_up(){
  //使紧凑
  for(var i=1;i<=4;i++){
    if(localStorage.getItem('n3'+i)==0){
      localStorage.setItem('n3'+i,localStorage.getItem('n4'+i));
      localStorage.setItem('n4'+i,0);
    }
    if(localStorage.getItem('n2'+i)==0){
      localStorage.setItem('n2'+i,localStorage.getItem('n3'+i));
      localStorage.setItem('n3'+i,localStorage.getItem('n4'+i));
      localStorage.setItem('n4'+i,0);
    }
    if(localStorage.getItem('n1'+i)==0){
      localStorage.setItem('n1'+i,localStorage.getItem('n2'+i));
      localStorage.setItem('n2'+i,localStorage.getItem('n3'+i));
      localStorage.setItem('n3'+i,localStorage.getItem('n4'+i));
      localStorage.setItem('n4'+i,0);
    }
  }
  //相加
  for(var i=1;i<=4;i++){
    if(localStorage.getItem('n1'+i)==localStorage.getItem('n2'+i)){
      localStorage.setItem('n1'+i,parseInt(localStorage.getItem('n1'+i))*2);
      current_score+=parseInt(localStorage.getItem('n1'+i));
      localStorage.setItem('n2'+i,localStorage.getItem('n3'+i));
      localStorage.setItem('n3'+i,localStorage.getItem('n4'+i));
      localStorage.setItem('n4'+i,0);
      continue;
    }
    if(localStorage.getItem('n2'+i)==localStorage.getItem('n3'+i)){
      localStorage.setItem('n2'+i,parseInt(localStorage.getItem('n2'+i))*2);
      current_score+=parseInt(localStorage.getItem('n2'+i));
      localStorage.setItem('n3'+i,localStorage.getItem('n4'+i));
      localStorage.setItem('n4'+i,0);
      continue;
    }
    if(localStorage.getItem('n3'+i)==localStorage.getItem('n4'+i)){
      localStorage.setItem('n3'+i,parseInt(localStorage.getItem('n3'+i))*2);
      current_score+=parseInt(localStorage.getItem('n3'+i));
      localStorage.setItem('n4'+i,0);
      continue;
    }
  }
  localStorage.setItem('current_score',current_score);
  if(is_full()==0){
    set_new_2();
  }

  window.open('play2048inside.html','_self');
}

var current_score=0;

function recovery_game_from_local(){
  if(!localStorage.getItem('stored')=='1'){
    //第一次玩
    localStorage.setItem('stored','1');
    localStorage.setItem('ts','0');
      //全部归0
      for(var i=1;i<=4;i++){
        for(var i1=1;i1<=4;i1++){
          localStorage.setItem('n' + i + i1,'0');
        }
      }
      //随机设两个2
      var ax,ay,bx,by;
      ax=get_random_number();
      ay=get_random_number();
      while(1){
        bx=get_random_number();
        by=get_random_number();
        if(bx!=ax || by!=ay){
          break;
        }
      }
    localStorage.setItem('n' + ax + ay,'2');
    localStorage.setItem('n' + bx + by,'2');
  }
  if(parseInt(localStorage.getItem('ts'))<parseInt(localStorage.getItem('current_score'))){
    localStorage.setItem('ts',parseInt(localStorage.getItem('current_score')));
  }
  total_score=parseInt(localStorage.getItem('ts'));
  current_score=parseInt(localStorage.getItem('current_score'));
  document.getElementById("score").innerText='当前成绩:' + parseInt(localStorage.getItem('current_score')) +  '  最高成绩:' + total_score;
  for(var i=1;i<=4;i++){
    for(var i1=1;i1<=4;i1++){
      document.getElementById('game2048_block_' + i + i1).innerText=parseInt(localStorage.getItem('n' + i + i1));
    }
  }
  refresh_game_surface();
  // window.open('play2048.html','_self');
}


function new_game(){
  //全部归0
  for(var i=1;i<=4;i++){
    for(var i1=1;i1<=4;i1++){
      localStorage.setItem('n' + i + i1,'0');
    }
  }
  //随机设两个2
  var ax,ay,bx,by;
  ax=get_random_number();
  ay=get_random_number();
  while(1){
    bx=get_random_number();
    by=get_random_number();
    if(bx!=ax || by!=ay){
      break;
    }
  }
  localStorage.setItem('n' + ax + ay,'2');
  localStorage.setItem('n' + bx + by,'2');
  localStorage.setItem('current_score',0);
  // refresh_game_surface();
  window.open('play2048inside.html','_self');
}

function refresh_game_surface(){
  for(var i=1;i<=4;i++){
    for(var i1=1;i1<=4;i1++){
      if(document.getElementById('game2048_block_' + i + i1).innerText=='0'){
        document.getElementById('game2048_block_' + i + i1).style.color="rgb(205,193,180)";
        document.getElementById('game2048_block_' + i + i1).style.backgroundColor="rgb(205,193,180)";
      }else{
        document.getElementById('game2048_block_' + i + i1).style.color="rgb(119,110,101)";
        document.getElementById('game2048_block_' + i + i1).style.backgroundColor="rgb(238,228,218)";
      }
    }
  }
}


</script>

<style scoped>

.up{
  background-image: url("/src/assets/jiantou_xiangshang.png");
}

.down{
  background-image: url("/src/assets/jiantou_xiangxia.png");
}

.left{
  background-image: url("/src/assets/jiantou_xiangzuo.png");
}

.right{
  background-image: url("/src/assets/jiantou_xiangyou.png");
}

.player-2048_main_top_gamebox_control_button:active{
  scale: 97%;
}

.player-2048_main_top_gamebox_control_button{
  width: 80px;
  height: 80px;
  display: inline-block;
  background-color: rgba(238,228,218);
  border-radius: 5px;
  margin-bottom: 3px;
  transition: all 0.1s;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position:center;
  background-size: contain;
}

.player-2048_main_top_gamebox_control{
  width: 100px;
  height: 368px;
  border-radius: 10px;
  background-color: rgb(187,173,160);
  top: -570px;
  left: 640px;
  padding-top: 10px;
}

.game2048_block{
  width: 120px;
  height: 120px;
  line-height: 120px;
  display: inline-block;
  margin-right:15px;
  margin-bottom: 15px;
  border-radius: 3px;
  background-color: rgba(205,193,180);
  font-size: 45px;
  font-weight: bold;
  color: rgb(119,110,101);
}

.player-2048_main_top_gamebox{
  width: 565px;
  height: 565px;
  border-radius: 10px;
  background-color: rgb(187,173,160);
  display: inline-block;
  margin: 5px 5px;
  margin-top: 10px;
  padding-left: 14px;
  padding-top: 16px;
  position: relative;
  left: -55px;
}

.top_score{
  background-color: #ff6767 !important;
  width: 370px !important;
  right: 30px !important;
  left: unset !important;
}

.top_score:hover{
  background-color: #fd8f8f !important;
}

.top_score:active{
  scale: 100% !important;
}

.player-2048_main_bottom_controls_button{
  width: 150px;
  height: 60px;
  border-radius: 3px;
  background-color: limegreen;
  font-size: 22px;
  text-align: center;
  line-height: 60px;
  color: white;
  transition: all 0.1s;
  cursor: pointer;
  display: inline-block;
  position: absolute;
}

.player-2048_main_bottom_controls_button:hover{
  background-color: #51e851;
}

.player-2048_main_bottom_controls_button:active{
  scale: 97%;
}

.player-2048_main_top{
  width: 100%;
  height: 575px;
  /*background-color: greenyellow*/
  text-align: center;
}

.player-2048_main{
  width: 800px;
  height: 675px;
  background-color: white;
  transition: scale 0.5s;
  /*scale: 90%;*/
}

</style>